<template>
  <div class="page-tab">
    <div class="tab-body">
      <div v-for="(item,i) in tabListInfo" :key="i">
        <div :class="getClass(item,i)" @click="tabClick(item,i)">
          <img class="w h" v-show="selected==i" :src="item.selected" />
          <img class="w h" v-show="selected!=i" :src="item.image" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    routeName: String,
  },
  data() {
    return {
      selected: 0,
      tabList: [
        { label: 'home', icon: 'home', path: { name: 'home' } },
        { label: 'task', icon: 'task', path: { name: 'task' } },
        { label: 'task-add', icon: 'task-add', path: { name: 'task-add' }, isMax: true,isDevelopment:true  },
        { label: 'performance', icon: 'performance', path: { name: 'performance' } },
        { label: 'profile', icon: 'profile', path: { name: 'profile' } }
      ]
    }
  },
  computed: {
    tabListInfo() {
      return this.tabList.map(item => {
        item.image = new URL(`../../../assets/main/tab/${item.icon}.png`, import.meta.url)
        item.selected = new URL(`../../../assets/main/tab/${item.icon}-selected.png`, import.meta.url)
        return item;
      })
    }
  },
  watch: {
    routeName(news) {
      this.changeSelected(news);
    }
  },
  methods: {
    getClass(item, index) {
      return [
        'tab-item',
        this.selected == index && !item.isMax ? 'tab-selected' : '',
        !item.isMax ? '' : 'tab-max'
      ]
    },
    tabClick(item, i) {
      if(item.isDevelopment){
        this.$toast('当前功能开发中或暂未提供！')
      }
      try{
        this.selected = i;
        this.$emit('tab-click', { item, index: i });
      }catch(e){
        console.log("🚀 ~ file: index.vue:61 ~ tabClick ~ e", e)
      }
    },
    changeSelected(pageName) {
      let index = this.tabList.findIndex(item => item.path.name == pageName);
      if (index < 0) {
        return;
      }
      this.selected = index;
    }
  },
  created() {
    setTimeout(() => {
      this.changeSelected(this.$route.name);
    }, 100)
  },
}


</script>

<style scoped lang="scss">
.page-tab {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  padding-top: 0px;
  padding: 30px;
  z-index: 1300;
  box-sizing: border-box;
  user-select: none;


  .tab-body {
    width: 100%;
    height: 74px;
    border-radius: 14px;
    background: #ffffffff;
    box-shadow: -3px 7px 13px 0px #f1f7ffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 16px;
    box-sizing: border-box;

    .tab-item {
      width: 20px;
      height: 20px;
      position: relative;
    }
    .tab-max {
      width: 50px;
      height: 50px;
    }
    .tab-item.tab-selected::before {
      content: '.';
      font-size: 40px;
      color: #5b67caff;
      position: absolute;
      text-align: center;
      bottom: -16px;
      left: 0%;
      width: 100%;
    }
  }
}
</style>
